﻿<Flex Gap="FlexGap.Middle" Direction="FlexDirection.Vertical">
    <span><Switch @bind-Checked="custom" /> Custom</span>
    @if (custom)
    {
        <Slider @bind-Value="customGapSize" />

        <Flex Gap="@($"{customGapSize}")">
            <Button Type="ButtonType.Primary">Primary</Button>
            <Button>Default</Button>
            <Button Type="ButtonType.Dashed">Dashed</Button>
            <Button Type="ButtonType.Link">Link</Button>
        </Flex>
    }
    else
    {
        <RadioGroup @bind-Value="gapSize" Options="gapSizeOptions"></RadioGroup>

        <Flex Gap="@gapSize">
            <Button Type="ButtonType.Primary">Primary</Button>
            <Button>Default</Button>
            <Button Type="ButtonType.Dashed">Dashed</Button>
            <Button Type="ButtonType.Link">Link</Button>
        </Flex>
    }

</Flex>

@code {
    RadioOption<FlexGap>[] gapSizeOptions = new RadioOption<FlexGap>[]
    {
        new(){ Value = FlexGap.Small, Label="Small", },
        new(){ Value = FlexGap.Middle, Label="Middle", },
        new(){ Value = FlexGap.Large, Label="Large", },
    };

    FlexGap gapSize;

    bool custom;
    double customGapSize;
}
